<template>
  <div class="box" :style="`width:${width}px;height:${height}px;`">
    <div class="up-info">
      <div class="up-action">
        <el-avatar @click="toSpace" :src="data.userAvatar" :size="0.1*height"></el-avatar>
        &nbsp;
        <span class="nickname" @click="toSpace">{{ data.nickname }}</span>
        &nbsp;
        <span v-if="forwardType === 3">投稿了视频</span>
        <span v-else-if="forwardType === 1">投稿了视频</span>
      </div>
      <div class="care">
        +&nbsp;关注
      </div>
    </div>
    <div class="video-box">
      <div class="video-cover" @click="toDetail">
          <el-image :src="data.videoCover"></el-image>
      </div>
      <div class="video-info">
        <div class="title" @click="toDetail">
          {{ data.videoTitle }}
        </div>
        <div class="introduction" @click="toDetail">
          {{
            data.videoIntroduction
          }}
        </div>
        <div class="statistic">
          <div class="play-count">
            <el-icon><VideoPlay /></el-icon>
            {{data.playCount}}
          </div>
          <div class="barrage-count">
            <el-icon><ChatLineSquare /></el-icon>
            {{data.videoBarrageCount}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

const props = defineProps({
  width:{
    type:Number,
    default:450
  },
  height:{
    type:Number,
    default:180
  },
  data:{
    type:Object,
    default:{
      userId:0,
      videoId:0,
      nickname:'',
      userAvatar:'',
      videoCover:'',
      videoTitle:'',
      videoBarrageCount:'',
      playCount:'',
      videoIntroduction:'',
    }
  },
  forwardType:{
    type:Number,
    default:0 // 0：不转发  1：转发视频  3：投稿视频
  }

})


const toDetail = () => {
  window.open("/video?videoId="+props.data.videoId,"_blank")
}
const toSpace = () => {
  window.open("/space/home/"+props.data.userId,"_blank")
}
</script>
<style lang="scss" scoped>
.box{
  box-sizing: border-box;
  background-color: #ffe3f4;
  padding: 4%;
  border-radius: 5%;
  .up-info{
    box-sizing: border-box;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .up-action{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:var(--gray-font-color--);
      font-size: 14px;
      .nickname{
        color: #363636;
      }
    }
    .care{
      cursor: pointer;
      width: 12%;
      height: 100%;
      font-size: 14px;
      color: #2ae6ff;
    }
  }
  .video-box{
    box-sizing: border-box;
    height: 80%;
    display: flex;
    .video-cover{
      cursor: pointer;
      background-color: #2c2424;
      width: 50%;
      height: 100%;
      border-top-left-radius: 5%;
      border-bottom-left-radius: 5%;
      overflow: hidden;
    }
    .video-info{
      padding-left: 5%;
      width: 45%;
      height: 100%;
      font-size: 13px;
      .title{
        cursor: pointer;
        height: 40%;
        font-size: 14px;
        overflow: hidden;
      }
      .introduction{
        cursor: pointer;
        overflow: hidden;
        color:var(--gray-font-color--);
        height: 40%;
      }
      .statistic{
        height: 20%;
        display: flex;
        .play-count,.barrage-count{
          width: 50%;
          display: flex;
          align-items: center;
        }
      }
    }

  }
}
</style>